<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
    </style>
</head>
<body>
<div id="app">
    <!--父组件传值给子组件，通过v-bind绑定属性传递-->
    <com1 :pname="name"></com1>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'tom'
        },
        methods: {
        },
        components: {
            com1: {
                template: '<h1 @click="change">{{msg}} {{pname}}</h1>',
                // 组件data是组件私有数据
                // 与props区别就是，props是父组件传递过来的数据，只读，而data可读写
                data: () => {
                    return {
                        msg: 'hello'
                    }
                },
                props: ['pname'], //props属性数组声明的属性名称都是父组件传递过来的属性
                methods: {
                    change() {
                        this.msg = 'how are you? ';
                    }
                }
            }
        }
    });
</script>
</body>
</html>
